<template>
	<div class="business">
		<!--上边-->
	<div style="height:80px;">
		<div style="margin-top:20px;margin-left:40px;float:left">
			<el-form :inline="true" :model="filters"  ref="filters" :rules="rules" class="demo-form-inline">
				<el-form-item label="选择日期" style="margin-left:0px" prop="date">
						<el-date-picker 
							v-model="timeValue"
							type="daterange"
							range-separator="至"
							start-placeholder="开始日期"
							end-placeholder="结束日期"
							format="yyyy 年 MM 月 dd 日">
					</el-date-picker>
				</el-form-item>
				<el-form-item>
					<el-button icon="el-icon-search" @click='requestList' round>搜索</el-button>
				</el-form-item>
			</el-form>
		</div>
	</div>
	<!--饼状图-->
	<el-row class="zhe_xian">
		<el-col :span="24" style='margin-left:55px;'>
			<div v-show="cookieLen!=0" class="grid-content bg-purple-light" id="appCookiePic" style="width:630px;height:400px;display:inline-block;"></div>
			<div v-show="pillarLen!=0" class="grid-content bg-purple-light" id="appPostPic" style="width:500px;height:400px;display:inline-block;"></div>
		</el-col>
	</el-row>	
			<!--中间内容-->
			<el-table 
				:data="tableData"    
				:row-class-name="tableRowClassName"  
				:header-cell-class-name="tableheaderClassName"
				v-loading="listLoading"
				style="width:95%;margin-left:50px;margin-top:30px;"
				>
					 <el-table-column 
					prop="appName"
					label="应用名称">
					</el-table-column>
					<el-table-column
					prop="authInterfaceSize"
					label="授权接口个数">
					</el-table-column>
					<el-table-column
					prop="accessInterfaceSize"
					label="访问接口个数">
					</el-table-column>
					<el-table-column
					prop="totalAccessSize"
					sortable
					label="总访问次数">
					</el-table-column>
					<el-table-column
					prop="successPercent"
					sortable
					label="成功率(%)">
					</el-table-column>
					<el-table-column
						fixed="right"
						label="操作">
						<template slot-scope="scope" >
						<el-button   @click="" type="text" size="small">
							<span @click="applicationDetails(scope.row)">详情</span>
						</el-button>
						</template>
					</el-table-column>
		 </el-table>
		 <!--底部内容-->
		<div class="di">
			<div>
				<el-pagination
					style='text-align: center;'
					background
					layout="prev, pager, next" 
					@current-change="handleCurrentChange" 
					:total="totalCount" >
				</el-pagination>
			</div>
		</div>
		
</div>
</template>
<script>
import util from '../../common/js/date.js';
import  echarts from 'echarts';
import { appList,  appCookie, appPillar, checkLogin } from '../../api/api.js';
export default {
	name:'applyUse',
	data() {
		return {
			timeValue:'',
			size:5,
			pageNumber: 1,
			pageSize: 10,
			startDate:'',
			endDate:'',
			cookieArr:[],//饼状图
			cookieArr2:[],
			pillarArr:[],//柱状图
			pillarArr2:[],
			pillarLen:'',
			cookieLen:'',
			totalCount: 0,
			listLoading:false,
			tableData: [],
			dialogFormVisible: false,
			dialogFormVisible1: false,
		};
	},
	methods:{
		//请求日期数据
		requestList(){
			if(this.timeValue==null || this.timeValue.length!=2){
				return
			}
			let start = this.timeValue[0];
			let year = start.getFullYear();
			let month = start.getMonth()+1;
			let datas = start.getDate();
			let end = this.timeValue[1];
			let endyear = end.getFullYear();
			let endmonth = end.getMonth()+1;
			let enddatas = end.getDate();
			this.startDate = (year.toString())+'-'+(month.toString())+'-'+(datas.toString());
			this.endDate = (endyear.toString())+'-'+(endmonth.toString())+'-'+(enddatas.toString());
			this.getUsers();
			this.getUsers2();
			this.getUsers3();
		},		
	//获取信息列表
		getUsers2() {
			let para = {
				pageNumber: this.pageNumber,
				pageSize: this.pageSize,
				startDate: this.startDate,
				endDate: this.endDate
			};
			this.listLoading = true;
			appList(para).then((res) => {
				console.log('cookieList....',res.list);
				this.tableData = res.list;
				this.totalCount = res.count;
				this.listLoading = false;
			});
		},
		//获取饼状图
		getUsers() {
			let para = {
				size: this.size,
				startDate: this.startDate,
				endDate: this.endDate
			};
			this.listLoading = false;
			appCookie(para).then((res) => {
				this.cookieLen = res.length;
				for(var i=0; i< res.length; i++){
						var cookieData = {};
						cookieData.value = res[i].totalAccessSize;
						cookieData.name = res[i].appName;
						this.cookieArr.push(cookieData);
						this.cookieArr2.push(res[i].appName);
					}
				this.cookieList(this.cookieArr,this.cookieArr2);
				this.cookieArr=[];
				this.cookieArr2=[];
				this.listLoading = false;
			});
		},
		//获取柱子状图
		getUsers3() {
			let para = {
				size: this.size,
				startDate: this.startDate,
				endDate: this.endDate
			};
			this.listLoading = false;
			appPillar(para).then((res) => {
				this.pillarLen = res.length;
				for(var i=0; i< res.length; i++){
					this.pillarArr.push(res[i].appName);
					this.pillarArr2.push(Number(res[i].successPercent));
				}
					console.log('appName名字......',this.pillarArr);
					console.log('appName成功率......',this.pillarArr2);
				this.pillarList(this.pillarArr,this.pillarArr2);
				this.pillarArr=[];
				this.pillarArr2=[];
				this.listLoading = false;
			});
			
		},		
		//应用使用详情
		applicationDetails(row){
			let para=row;
			para.startDate=this.startDate;
			para.endDate=this.endDate;
			console.log(para);
			sessionStorage.setItem('applicationDetails', JSON.stringify(para));
			this.$router.push('/monitor/applyDetail');
		},
		// 分页获取
		handleCurrentChange(val) {
			this.pageNumber = val;
			this.getUsers2();
		},
		onSubmit(formName){
			this.$refs[formName].validate((valid) => {
				if (valid) {
					this.getUsers2();
				} else {
					console.log('error submit!!');
					return false;
				}
			});
		},
		tableheaderClassName() {
			return "table-head-th";
		},
		tableRowClassName({ rowIndex}) {
			if (rowIndex % 2==0) {
				return 'success-row';
			} else if (rowIndex % 2 !==0) {
				return 'warning-row';
			}
			return '';
		},
		cookieList(cookieArr,cookieArr2){
			//响应时间饼状图		
			this.zhe = echarts.init(document.getElementById('appCookiePic'));
			this.zhe.setOption(
				{
		    title : {
		        text: '应用调用次数饼状图',
		        x:'center'
		    },
		    tooltip : {
		        trigger: 'item',
		        formatter: "{a} <br/>{b} : {c} 次 ({d}%)"
		    },
		    legend: {
		        orient: 'vertical',
		        left: 'left',
		        data:cookieArr2
		    },
		    series : [
			        {
			            name: '',
			            type: 'pie',
			            radius : '55%',
			            center: ['50%', '60%'],
			            data:cookieArr,
			            itemStyle: {
			                emphasis: {
			                    shadowBlur: 10,
			                    shadowOffsetX: 0,
			                    shadowColor: 'rgba(0, 0, 0, 0.5)'
			                }
			            }
			        }
			    ]
			});
		},
		pillarList(pillarArr,pillarArr2){
			//响应时间柱状图
			this.zhu = echarts.init(document.getElementById('appPostPic'));
			this.zhu.setOption(
			{	
				title:{
			        text: '应用接口成功率柱状图',
			        x:'center'
			    },
		    	color: ['#3398DB'],
			    tooltip : {
			        trigger: 'axis',
			        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
			            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
			        }
			    },
			    grid: {
			        left: '3%',
			        right: '4%',
			        bottom: '3%',
			        containLabel: true
			    },
			    xAxis : [
			        {
			        	show : false,
			            type : 'category',
			            data : pillarArr,
			            axisTick: {
			                alignWithLabel: true
			            }
			        }
			    ],
			    yAxis : [
			        {
			            type : 'value',
			            min:1
			        }
			    ],
			    series : [
			        {
			            name:'访问成功率(%) ',
			            type:'bar',
			            barWidth: '60%',
			            data:pillarArr2
			        }
			    ]
			})
		}
	},
	mounted() {
		if(checkLogin(this)){
			
			this.requestList();
		}
	},
	created(){
		const start =new Date();
		const end =new Date();
		this.timeValue =[start,end];
	}
};
</script>
<style scoped>
	.business .el-table .table-head-th{
		background-color:#f4f4f4;
		font-size: large;
	}
	.business{width:90%;margin:10px;}
	.business .di{width:100%;margin-left:0px;position:relative;left:6%;
	 bottom:-50%;line-height:36px;
	 margin-top: 30px;}
</style>
